<script>
import AreaCommon from "@/components/comp/account_com/AreaCommon.vue";

export default {
  name: "ResultList",
  components: {AreaCommon},
  created() {
    //初始化表格数据
    this.init_table_data();
    //选择版本信息---确定任务筛选的选项
    this.choose_version();
  },
  data() {
    return {
      tableData: [],
      page: {
        pageNow: 1,
        pageSize: 7,
        tj1: '',  //手机，姓名等
        tj2: '',  //年龄段
        tj4: '',  //户籍地址
        tj5: '',  //任务类型
        total: 0
      },
      baseFileUrl:'http://8.152.4.101:9999/',  //下载报告的固定开头，布署时需要更改BaesUrl
      // baseFileUrl:'http://localhost:9999/',  //下载报告的固定开头，布署时需要更改BaesUrl
      cnot_use:false,
      file_urls:'',  //选中的报告的路径
      ans_ids:'',//选中的报告的题目id
      beath_load_url:'',
      isLoading:false,
      is_beath_disable:false,
      vresion_type:0,
      ts1:false,
      ts2:false,
      ts3:false,
      ts4:false,
      ts5:false,
      ts6:false,
      ts7:false,
    }
  },
  methods: {
    //选择版本，确定任务下拉选项
    choose_version(){
      const vtype = Number(this.$store.state.version_type)
      this.vresion_type = vtype;
      if(vtype==1){
          this.ts1 = true;
      }else if(vtype==2){
          this.ts1 = true;
          this.ts2 = true;
      }else if(vtype==3){
        this.ts1 = true;
        this.ts2 = true;
        this.ts3 = true;
      }else if(vtype==4){
        this.ts4 = true;
      }else if(vtype==5){
        this.ts4 = true;
        this.ts5 = true;
      }else if(vtype==6){
        this.ts4 = true;
        this.ts5 = true;
        this.ts6 = true;
      }else if(vtype==7){
        this.ts4 = true;
        this.ts5 = true;
        this.ts6 = true;
        this.ts7 = true;
      }
    },


    //初始化表格数据
    init_table_data() {
      const that = this;
      // "tasks/get_reports"
      this.$http.get("reports/get_report_list", {params: this.page}).then(res => {
        if (res.data.success) {
            this.tableData = res.data.data.records;
            this.tableData.forEach(item=>{
              item.bk2 = false;
              item.bk3 = that.areaAdd(item);
            })
            this.page.total = res.data.data.total;
        } else {
          that.$message.error(res.data.errMsg);
        }
      })
    },



    sizeChange(val) {
      this.page.pageSize = val;
      this.init_table_data();
    },

    pageChange(val) {
      this.page.pageNow = val;
      this.init_table_data();
    },


    taskTypeFormater(row){
        if(row.taskType==1 || row.taskType==4){
          return '任务一';
        }else if(row.taskType==2  || row.taskType==5){
          return '任务二';
        }else if(row.taskType==3   || row.taskType==6){
          return '任务三';
        }else if(row.taskType==7){
          return '任务四';
        }else{
          return '综合';
        }
    },

    //显示详情
    show_infos(row) {
      this.$router.push(
          {
            path:'res_info',
            query:{
              report:row
            }
          }
      )
    },

    //格式化户籍地址
    areaAdd(row){
      const area = row.hjArea;
      let area_address = "";
      if(area&&area.length>0){
        const arr = area.split(",")
        arr.forEach(item=>{
          area_address += item;
        })
      }
      return area_address;
    },

    //格式化平均反应时，四舍五入后，保留两位小数
    // avgtime_formatter(row){
    //   return  Math.round(row.bk1 * 100) / 100;
    // },

    //下载报告点击后，等2秒钟之后，可再次访问
    down_load(row){
        const _this = this;
        row.bk2 = true;
        //按钮禁用1.5秒
        setTimeout(()=>{
          row.bk2  = false;
        },1500)
        //请求资源下载地址
        this.$http.post("reports/get_report_path",row).then(re=>{
            if(re.data.success){
              _this.begin_down(row,re.data.data)
            }else{
              _this.$message.error("文件下载失败，请稍后重试")
            }
        })

    },

    begin_down(row,new_path){
      this.$http({
        url:this.baseFileUrl + new_path,
        method:"GET",
        responseType:'blob'
      }).then(res=>{
        //创建一个链接DOM节点
        const link = document.createElement('a');
        // 创建一个新的Blob对象
        const blob = new Blob([res.data]);
        // 创建blob链接
        link.href = window.URL.createObjectURL(blob);

        var tx_str = "";   //Action和Emtion缩写
        var type = row.taskType;
        if(type==1 || type==4){
          tx_str = type==1?"AC1":"EM1"
        }else if(type==2 || type == 5){
          tx_str = type==2?"AC2":"EM2"
        }else if(type==3 || type == 6){
          tx_str = type==3?"AC3":"EM3"
        }else if(type==7){
          tx_str = "EM4"
        }else{
          tx_str = type>30?'EMZ':'ACZ'
        }
        var task_no = row.taskNo.substring(1)
        link.download = row.realName + "-" + tx_str + "-" + task_no+".xlsx";//下载的文件名加后缀 可自定义
        // 隐藏DOM节点
        link.style.display = 'none';
        // 将链接节点添加到DOM中
        document.body.appendChild(link);
        // 模拟点击下载-
        link.click();
        // 移除DOM节点
        document.body.removeChild(link);
      })
    },

    //获取选中的户籍信息
    get_hj(hjName,hjCode){
      this.page.tj4 = hjName;
      this.init_table_data();
    },

    //多选状态发生改变时
    selectChanges(rows){
      this.file_urls = "";
      this.ans_ids = "";
      if(rows){
        rows.forEach(row =>{
          this.file_urls += row.reportPath+",";
          this.ans_ids += row.id+",";
        })
      }
    },

    // 批量下载
    batch_export(){
      if(this.file_urls.length>0){
        if(!this.is_beath_disable){
            this.$message.success("文件生成中,请耐心等待");
            this.is_beath_disable = true;
            setTimeout(()=>{
              this.is_beath_disable = false;
            },1500)
            const _this = this;
            this.$http.get("reports/gener_zip",{params:{
                fileUlrs:this.file_urls,
                shaixuan:this.page.tj5,
                answerIds:this.ans_ids
              }}).then(res=>{
                if(res.data.success){
                  const zipPath = res.data.data;
                  this.$http({
                    url:this.baseFileUrl + zipPath,
                    method:"GET",
                    responseType:'blob'
                  }).then(res=>{
                    //创建一个链接DOM节点
                    const link = document.createElement('a');
                    // 创建一个新的Blob对象
                    const blob = new Blob([res.data]);
                    // 创建blob链接
                    link.href = window.URL.createObjectURL(blob);

                    link.download = "答题报告.zip";//下载的文件名加后缀 可自定义
                    // 隐藏DOM节点
                    link.style.display = 'none';
                    // 将链接节点添加到DOM中
                    document.body.appendChild(link);
                    // 模拟点击下载
                    link.click();
                    // 移除DOM节点
                    document.body.removeChild(link);
                  })
                }else{
                    this.$message.error("文件下载失败，请重新下载")
                }
            })
        }
      }else{
          this.$message.error("请选择用户后，再进行下载!")
      }
    }
  }
}
</script>

<template>
  <div>
    <!----------------------------------------------------------------------------------->
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评测结果</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-card class="box-card" style="margin-top: 20px">
      <!----------------------------------------------------------------------------------->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input @keyup.native.enter="init_table_data" v-model="page.tj1" placeholder="请输入姓名、电话、任务名称">
            <i class="el-icon-search" slot="suffix" style="line-height: 40px" @click="init_table_data"></i>
          </el-input>
        </el-col>

        <el-col :span="3" >
          <el-select v-model="page.tj2" placeholder="年龄段" clearable @change="init_table_data" >
            <el-option  label="18岁以下" value="1,17"></el-option>
            <el-option  label="18 ~ 34岁" value="18,34"></el-option>
            <el-option  label="35 ~ 44岁" value="35,44"></el-option>
            <el-option  label="45 ~ 54岁" value="45,54"></el-option>
            <el-option  label="55 ~ 64岁" value="55,64"></el-option>
            <el-option  label="65 ~ 74岁" value="65,74"></el-option>
            <el-option  label="75 ~ 84岁" value="75,84"></el-option>
            <el-option  label="85 ~ 94岁" value="85,94"></el-option>
            <el-option  label="95岁以上" value="95,140"></el-option>
          </el-select>
        </el-col>

        <el-col :span="3" >
          <el-select v-model="page.tj5" placeholder="任务类型" clearable @change="init_table_data" >
            <el-option  label="任务一" v-if="ts1 || ts4" :value="ts1?1:4"></el-option>
            <el-option  label="任务二" v-if="ts2 || ts5" :value="ts2?2:5"></el-option>
            <el-option  label="任务三" v-if="ts3 || ts6" :value="ts3?3:6"></el-option>
            <el-option  label="任务四" v-if="ts7" value="7"></el-option>
          </el-select>
        </el-col>

        <el-col :span="2"  style="line-height: 40px">
          <span style="float: right">户籍:</span>
        </el-col>
        <el-col :span="9">
          <AreaCommon @choosd_area="get_hj"></AreaCommon>
        </el-col>

        <el-col :span="2">
          <el-button  type="primary" @click="batch_export" :disabled="is_beath_disable">批量导出</el-button>
        </el-col>

      </el-row>

      <!----------------------------------------------------------------------------------->
      <el-row style="margin-top: 20px">

        <el-table @selection-change="selectChanges" :data="tableData" ref="accountTable" border style="width: 100%">

          <el-table-column
              type="selection"
              align="center"
              width="80">
          </el-table-column>

          <el-table-column
              prop="realName"
              align="center"
              label="姓名"
              width="120">
          </el-table-column>

          <el-table-column
              prop="groupName"
              label="任务名称"
              align="center"
              width="220">
          </el-table-column>

          <el-table-column
              prop="taskNo"
              label="任务编号"
              align="center"
              width="180"
          >
          </el-table-column>

          <el-table-column
              prop="taskType"
              label="任务"
              align="center"
              width="120"
              :formatter="taskTypeFormater"
          >
          </el-table-column>

          <el-table-column
              prop="reportTime"
              width="180"
              align="center"
              label="报告日期">
            <template slot-scope="scope">
              {{scope.row.reportTime}}
            </template>
          </el-table-column>

          <el-table-column
              align="center"
              label="正确率"
              width="120">
            <template slot-scope="scope">
              {{scope.row.rightRate*100}}%
            </template>
          </el-table-column>

          <el-table-column
              prop="avgTime"
              align="center"
              label="反应时(ms)"
              width="120">
          </el-table-column>

          <el-table-column
              prop="answerAge"
              align="center"
              label="年龄"
              width="120">
          </el-table-column>

          <el-table-column
              prop="phone"
              label="电话"
              align="center"
              width="180">
          </el-table-column>

          <el-table-column
              label="户籍"
              align="center"
              width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>住址: {{ scope.row.bk3 }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" >{{ String(scope.row.bk3).substr(0,10) }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>



          <el-table-column
              fixed="right"
              width="120"
              label="操作">
            <template slot-scope="scope">
              <el-button @click="show_infos(scope.row)" type="primary" size="small" icon="iconfont icon-chakanxiangqing2" circle></el-button>
              <el-button @click="down_load(scope.row)"  type="danger" :disabled="scope.row.bk2"  icon="iconfont icon-xiazai" size="small" circle></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-------------------------------------------分页组件------------------------------------------------------------->
        <el-pagination
            @current-change="pageChange"
            @size-change="sizeChange"
            :current-page="page.pageNow"
            :page-sizes="[7, 15, 25, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px;float:right"
            :total="page.total">
        </el-pagination>
      </el-row>


    </el-card>
  </div>

</template>

<style scoped>

</style>